Right Rail Page Style

On the right side of this page you can see five basic styles for right rail containers. The right rail is designed to display contextual and related content that augments the value of the content in the body, e.g., pre-fabricated content blocks (as shown), related resources, downloads, etc.

By default, on mobile these blocks re-stack beneath body content.

Refrain from overloading the Right Rail to avoid diluting the relevancy of its content, and to minimize the unnecessary lengthening of pages, particularly mobile pages.

IMF_Right_Rail_Widgets are image or text containers within a col-sm-3 Bootstrap column.

External

  • Hind and Roboto Google Fonts
  • Boostrap CSS and JS

Internal

  • IMF_Right_Rail_Widgets.css
  • IMF_Typography.css
  • Image Containers dependencies
  • Buttons dependencies
  • Forms dependencies

Content Header H4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim more

Text Content inside a column width a full width image needs to be wrapped inside a div with the class "img-container-text-content" to give it enough padding more

Content Header H4

Content Header H4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.